<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PicShare - 共享相册</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="app-container">
        <!-- Navigation -->
        <nav class="navbar">
            <div class="navbar-content">
                <a href="/" class="navbar-brand">📸 PicShare</a>
                
                <form id="searchForm" class="search-box">
                    <input type="text" id="searchInput" placeholder="搜索文件..." th:value="${keyword}">
                    <button type="submit">🔍</button>
                </form>
                
                <div class="navbar-menu">
                    <span>欢迎, <span th:text="${user.nickname}"></span></span>
                    <a href="/settings">设置</a>
                    <a href="/logout">退出</a>
                </div>
            </div>
        </nav>
        
        <!-- Main Content -->
        <main class="main-content">
            <!-- Upload Section -->
            <div class="upload-section">
                <div class="upload-header" onclick="toggleUpload()">
                    <h2>上传文件</h2>
                    <span id="uploadToggle" class="upload-toggle">▼</span>
                </div>
                <div id="uploadContent" class="upload-content" style="display: none;">
                    <div id="uploadArea" class="upload-area">
                        <div class="upload-icon">📁</div>
                        <div class="upload-text">
                            <p>拖拽文件到这里，或点击选择文件</p>
                            <p>支持图片、文档、视频等多种格式</p>
                        </div>
                    </div>
                    <input type="file" id="fileInput" multiple="multiple" style="display: none;">
                </div>
            </div>
            
            <!-- Batch Operations Section -->
            <div class="batch-operations">
                <div class="batch-actions">
                    <div class="batch-buttons">
                        <button id="btnStartMonitoring" onclick="toggleMonitoring()" class="btn-monitoring">
                            <span class="monitoring-icon">🔴</span>
                            <span id="monitoringButtonText">开启 Live</span>
                        </button>
                        <button id="btnBatchMode" onclick="toggleBatchMode()" class="btn-batch-mode">
                            <span class="batch-icon">☑️</span>
                            批量操作
                        </button>
                        <button id="btnBatchShare" onclick="batchShare()" class="btn-batch-share" disabled>批量分享</button>
                        <button id="btnBatchDelete" onclick="batchDelete()" class="btn-batch-delete" disabled>批量删除</button>
                        <button id="btnCancelBatch" onclick="cancelBatchMode()" class="btn-cancel" disabled>取消</button>
                    </div>
                    <div class="batch-info">
                        <span id="selectedCount">已选择 0 个文件</span>
                    </div>
                </div>
            </div>
            
            <!-- Files Grid -->
            <div class="file-grid" id="fileGrid">
                <div th:each="file : ${pageResult.content}" class="file-item" th:data-file-id="${file.id}">
                    <div class="file-checkbox-container">
                        <input type="checkbox" class="file-checkbox" th:attr="data-file-id=${file.id}" onchange="updateSelectedCount()">
                    </div>
                    <div th:if="${file.image}">
                        <img th:src="'/thumbnails/' + ${file.fileName}" th:alt="${file.originalName}" class="file-preview">
                    </div>
                    <div th:if="${!file.image}" class="file-icon">
                        📄
                    </div>
                    <div class="file-info">
                        <div class="file-name" th:title="${file.originalName}" th:text="${file.originalName}"></div>
                        <div class="file-size" th:text="${fileUtil.formatFileSize(file.size)}"></div>
                        <div class="file-actions">
                            <button th:attr="data-file-id=${file.id}" onclick="shareFile(this.getAttribute('data-file-id'))" class="btn-share">分享</button>
                            <button th:attr="data-file-id=${file.id}" onclick="renameFile(this.getAttribute('data-file-id'))" class="btn-primary">重命名</button>
                            <button th:attr="data-file-id=${file.id}" onclick="deleteFile(this.getAttribute('data-file-id'))" class="btn-danger">删除</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Pagination -->
            <div class="pagination-container" th:if="${pageResult.totalPages > 1}">
                <div class="pagination">
                    <button class="pagination-btn" 
                            th:disabled="${!pageResult.hasPrevious()}"
                            th:onclick="'goToPage(' + (${pageResult.currentPage - 1}) + ')'">
                        ‹ 上一页
                    </button>
                    
                    <div class="page-numbers">
                        <button class="page-number" 
                                th:each="i : ${#numbers.sequence(1, pageResult.totalPages)}"
                                th:classappend="${i == pageResult.currentPage ? 'active' : ''}"
                                th:onclick="'goToPage(' + ${i} + ')'"
                                th:text="${i}">
                        </button>
                    </div>
                    
                    <button class="pagination-btn" 
                            th:disabled="${!pageResult.hasNext()}"
                            th:onclick="'goToPage(' + (${pageResult.currentPage + 1}) + ')'">
                        下一页 ›
                    </button>
                </div>
                
                <div class="pagination-info">
                    <span>第 [[${pageResult.currentPage}]] 页，共 [[${pageResult.totalPages}]] 页</span>
                    <span>总计 [[${pageResult.totalItems}]] 个文件</span>
                </div>
            </div>
        </main>
    </div>

    <script src="/static/js/app.js"></script>
</body>
</html>